<template>
  <a-row :gutter="[10, 10]">
    <!-- 设备运行监测区域 -->
    <a-col :span="24">
      <a-card title="设备运行监测" bordered>
        <a-table :columns="columns" :dataSource="deviceData" rowKey="key" bordered />
      </a-card>
    </a-col>

    <!-- 运行趋势分析区域 -->
    <a-col :span="24">
      <a-card title="运行趋势分析" bordered>
        <a-row gutter="16" justify="space-around">
          <a-col :span="6">
            <a-button type="link" @click="showVoltageTrend">电压趋势图</a-button>
          </a-col>
          <a-col :span="6">
            <a-button type="link" @click="showCurrentTrend">电流趋势图</a-button>
          </a-col>
          <a-col :span="6">
            <a-button type="link" @click="showPowerTrend">功率趋势图</a-button>
          </a-col>
          <a-col :span="6">
            <a-button type="link" @click="showTemperatureTrend">温度趋势图</a-button>
          </a-col>
        </a-row>
        <div id="trendChart" style="width: 100%; height: 400px; margin-top: 20px"></div>
      </a-card>
    </a-col>

    <!-- 异常报警日志区域 -->
    <a-col :span="24">
      <a-card title="异常报警日志" bordered>
        <a-table :columns="logColumns" :dataSource="logData" rowKey="time" bordered />
      </a-card>
    </a-col>

    <!-- 操作按钮区域 -->
    <a-col :span="24">
      <a-card bordered>
        <a-row gutter="16" justify="end">
          <div class="operation">
            <a-button type="primary" @click="refreshData">刷新数据</a-button>
            <a-button type="default" @click="exportData">导出数据</a-button>
            <a-button type="link" @click="viewHistory">查看历史记录</a-button>
          </div>
        </a-row>
      </a-card>
    </a-col>
  </a-row>
</template>

<script setup>
  import { onMounted, reactive } from 'vue';
  import * as echarts from 'echarts';

  // 设备运行监测数据
  const deviceData = reactive([
    { key: '1', name: '风机 1', code: 'EQ001', voltage: 380, current: 15, power: 5.7, temp: 50, status: '开机' },
    { key: '2', name: '风机 2', code: 'EQ002', voltage: 385, current: 12, power: 4.6, temp: 48, status: '开机' },
    { key: '3', name: '光伏逆变器 1', code: 'EQ003', voltage: 220, current: 8, power: 1.8, temp: 55, status: '开机' },
    { key: '4', name: '光伏逆变器 2', code: 'EQ004', voltage: 225, current: 9, power: 2.0, temp: 53, status: '开机' },
    { key: '5', name: '配电柜 1', code: 'EQ005', voltage: 400, current: 20, power: 8.0, temp: 60, status: '异常' },
    { key: '6', name: '配电柜 2', code: 'EQ006', voltage: 400, current: 25, power: 9.5, temp: 65, status: '开机' },
    { key: '7', name: '工业负荷 A', code: 'EQ007', voltage: 390, current: 30, power: 11.7, temp: 45, status: '开机' },
    { key: '8', name: '工业负荷 B', code: 'EQ008', voltage: 395, current: 28, power: 11.1, temp: 46, status: '开机' },
    { key: '9', name: '办公空调 1', code: 'EQ009', voltage: 230, current: 6, power: 1.4, temp: 48, status: '停机' },
    { key: '10', name: '办公空调 2', code: 'EQ010', voltage: 230, current: 6, power: 1.4, temp: 48, status: '停机' },
  ]);

  // 表格列定义
  const columns = [
    { title: '设备名称', dataIndex: 'name', key: 'name' },
    { title: '设备编号', dataIndex: 'code', key: 'code' },
    { title: '电压 (V)', dataIndex: 'voltage', key: 'voltage' },
    { title: '电流 (A)', dataIndex: 'current', key: 'current' },
    { title: '功率 (kW)', dataIndex: 'power', key: 'power' },
    { title: '温度 (°C)', dataIndex: 'temp', key: 'temp' },
    { title: '运行状态', dataIndex: 'status', key: 'status' },
  ];

  // 异常报警日志数据
  const logData = reactive([
    { time: '2024-09-10 14:32', message: '配电柜 1 温度过高', status: '未处理' },
    { time: '2024-09-10 16:45', message: '光伏逆变器 2 电压异常', status: '处理中' },
    { time: '2024-09-11 09:10', message: '工业负荷 B 电流过载', status: '已处理' },
    { time: '2024-09-11 12:20', message: '办公空调 2 电源断开', status: '未处理' },
    { time: '2024-09-12 08:50', message: '风机 2 功率波动异常', status: '处理中' },
    { time: '2024-09-12 10:05', message: '配电柜 2 温度升高至警戒线', status: '未处理' },
  ]);

  // 日志表格列定义
  const logColumns = [
    { title: '时间', dataIndex: 'time', key: 'time' },
    { title: '报警信息', dataIndex: 'message', key: 'message' },
    { title: '状态', dataIndex: 'status', key: 'status' },
  ];

  // 定义趋势图显示函数
  const showChart = (chartTitle, seriesData) => {
    const chartDom = document.getElementById('trendChart');
    const chartInstance = echarts.init(chartDom);
    const option = {
      title: {
        text: chartTitle,
      },
      xAxis: {
        type: 'category',
        data: ['设备1', '设备2', '设备3', '设备4', '设备5'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: seriesData,
          type: 'line',
        },
      ],
    };
    chartInstance.setOption(option);
  };

  // 显示不同趋势图的函数
  const showVoltageTrend = () => {
    const voltageData = deviceData.map((item) => item.voltage);
    showChart('电压趋势图', voltageData);
  };

  const showCurrentTrend = () => {
    const currentData = deviceData.map((item) => item.current);
    showChart('电流趋势图', currentData);
  };

  const showPowerTrend = () => {
    const powerData = deviceData.map((item) => item.power);
    showChart('功率趋势图', powerData);
  };

  const showTemperatureTrend = () => {
    const tempData = deviceData.map((item) => item.temp);
    showChart('温度趋势图', tempData);
  };

  // 刷新数据、导出数据和查看历史记录的按钮操作
  const refreshData = () => {
    console.log('数据已刷新');
  };

  const exportData = () => {
    console.log('数据已导出');
  };

  const viewHistory = () => {
    console.log('查看历史记录');
  };

  // 在组件加载时初始化 ECharts
  onMounted(() => {
    showVoltageTrend(); // 默认显示电压趋势图
  });
</script>

<style scoped>
  .trend-card {
    margin-top: 20px;
  }
  .alarm-log-card {
    margin-top: 20px;
  }
  .operation {
    button {
      margin: 0 10px;
    }
  }
</style>
